<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js-->
    <script src="js/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!--一定要先引入vue.js再引入index.js因为elementui是基于vue.js实现的,如果不先引入vue.js elementui的js无用-->
    <script src="element-ui/lib/index.js"></script>
    <!--导入axios-->
    <script src="js/axios-0.18.0.js"></script>


</head>
<body>
<style>
    .el-header{
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }

</style>
<div id="app">
    <el-container >
        <el-header style="font-size:40px;">-----------------------实验报告上传系统-----------------------</el-header>
        <el-container>
            <el-aside width="200px" >
                <!--左侧导航栏-->
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">

                        <template slot="title"><i class="el-icon-message"></i>作业和文件管理</template>
                        <el-menu-item-group>

                            <el-menu-item index="1-1" @click="ToTeacherHome">个人主页</el-menu-item>
                            <el-menu-item index="1-2" @click="ToCourseForTea">课程管理</el-menu-item>
                            <el-menu-item index="1-3" @click="ToHomeWork">作业项目管理</el-menu-item>
                            <el-menu-item index="1-4" @click="">作业文件管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <!--条件查询表单-->
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="作业项目编号">
                        <el-input v-model="searchForm.homeWorkId" placeholder="作业项目编号"></el-input>
                    </el-form-item>
                    <el-form-item label="学号">
                        <el-input v-model="searchForm.sno" placeholder="学号"></el-input>
                    </el-form-item>
                    <el-form-item label="学生姓名">
                     <el-input v-model="searchForm.studentName" placeholder="学生姓名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="selectByCondition">查询</el-button>
                    </el-form-item>
                </el-form>

                <div align="left">
                    <!--批量下载按钮-->
                  <!--  <el-button type="primary"  @click="deleteHandleByIds()">
                        <a :href="跳转页面地址" style="color:#fff" id="test" style="text-decoration:none">批量下载</a>
                    </el-button>-->

                    <a id="test" :href="跳转页面地址">
                        <el-button type="primary"  @click="deleteHandleByIds()">批量下载</el-button>
                    </a>
                </div>

                <!--表格-->
                <el-table :data="tableData"
                          border
                          ref="multipleTable"
                          tooltip-effect="dark"
                          @selection-change="handleSelectionChange">>

                    <!--批量下载多选框-->
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column prop="homeWorkId" label="作业项目编号" width="120" >
                    </el-table-column>
                    <el-table-column prop="sno" label="学号" width="120" >
                    </el-table-column>
                    <el-table-column prop="studentName" label="学生姓名" width="120" >
                    </el-table-column>
                    <el-table-column prop="name" label="文件名" width="240" >
                    </el-table-column>
                  <!--  <el-table-column prop="newName" label="新文件名" width="240" >
                    </el-table-column>-->

                    <el-table-column  label="操作">
                        <template slot-scope="scope">
                            <el-link :href="'download/?openStyle=attachment&homeWorkId='+scope.row.homeWorkId+'&sno='+scope.row.sno">
                                <el-button type="primary" plain >下载</el-button>
                            </el-link>
                            <el-link :href="'download/?openStyle=inline&homeWorkId='+scope.row.homeWorkId+'&sno='+scope.row.sno">
                                <el-button type="success" plain >预览</el-button>
                            </el-link>

                       <el-button type="danger" plain @click="deleteHandleById(scope.row.homeWorkId,scope.row.sno)"  plain >删除</el-button>

                        </template>
                    </el-table-column>



                </el-table>
                <!-- Pagination分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    background
                    layout="sizes,prev, pager,
                    next,jumper,total"
                    :total="total">
                </el-pagination>
            </el-main>
        </el-container>
    </el-container>

</div>


</body>
</html>

<script>
    new Vue({
        el: "#app",
        data:{
            updateDialogFormVisible: false,
            dialogFormVisible: false,
            multipleSelection: [],
            total:1000,
            page: 1,
            pageSize: 10,
            searchForm: {
                homeWorkId:'',
                sno: '',
                studentName: ''
            },
            tableData:[{
                "homeWorkId": 4,
                "sno": "2015200050",
                "studentName": '谢文健',
                "name": '2015200050-实验1-谢文健.txt',
                "newName": '3.txt'

            },{
                "homeWorkId": 4,
                "sno": "2015200046",
                "studentName": '田宇航',
                "name": '2015200050-实验1-田宇航.txt',
                "newName": '2.txt'
            }]
        },
        methods:{
            downloadFile(name){
                axios.get("/download"+"?name="+name).then(res=>{
                /*    if (res.data.code === 1) {
                        this.updateForm=res.data.data;
                        this.$message.success('回显查询成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }*/
                })
            },
            deleteById(homeWorkId,sno){
                axios.delete("/deleteFile?homeWorkId="+homeWorkId+"&sno="+sno).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('删除成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    this.selectStuFile();
                })
            },
            deleteHandleById(homeWorkId,sno){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {
                    this.deleteById(homeWorkId,sno);
                })

            },
            deleteHandleByIds(){
                    var url="/downloads/";
                    var len=this.multipleSelection.length;
                    if(len==0) {
                        this.$confirm('请先选择要下载的文件', '提示', {
                            'confirmButtonText': '确定',
                            'cancelButtonText': '取消',
                            'type': 'info'
                        }).then(() => {
                            return;
                        })
                        return;
                    }//不选择要下载的文件则无响应
                     for(let i=0;i<len;i++){
                         url=url+this.multipleSelection[i].newName;
                         if(i<len-1){
                             url=url+",";
                         }
                     }
                    var a = document.getElementById("test");
                    a.href = url   //动态赋值
                    //a.click()

            },
            selectStuFile(){
                axios.get("/stuFiles?page="+ this.page+"&pageSize="+this.pageSize).then(res=>{
                    console.log(this.page+"-"+this.pageSize);
                    if(res.data.code!=1){
                        alert(res.data.msg);
                    } else{
                        this.total=res.data.data.total;
                        this.tableData=res.data.data.rows;
                    }

                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //ctrl+f快速搜索定位函数所在位置
            selectByCondition() {
                axios.get("/stuFiles?page="+ this.page+"&pageSize="+this.pageSize+"&homeWorkId="+this.searchForm.homeWorkId
                    +"&sno="+this.searchForm.sno+"&studentName="+this.searchForm.studentName).then(res=>{
                    if(res.data.code!=1){
                        alert(res.data.msg);
                    } else{
                        this.total=res.data.data.total;
                        this.tableData=res.data.data.rows;
                    }

                })
                console.log(this.searchForm);

            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.selectStuFile();
            },
            handleCurrentChange(val) {
                this.page=val;
                this.selectStuFile();
            },
            ToHomeWork(){
                window.location.href = 'homework.html';
            },
            ToTeacherHome(){
                window.location.href = 'teacherHome.html';
            },
            ToCourseForTea(){
                window.location.href = 'courseForTea.html';
            }
        },
        mounted(){
            if(localStorage.getItem("user")==null){
                window.location.href='login.html';
            }
            this.selectStuFile();
        }
    })
</script>